<template>
  <a class="linkbar-item" :href="url" target="_blank">
    <div class="linkbar-item-icon">
      <img class="linkbar-item-icon-img" :src="getImgUrl(icon)">
    </div>
    <p class="name">{{ name }}</p>
  </a>
</template>

<script>

export default {
  name: 'LinkBar',
  props: {
    icon: {
      type: String,
      required: true,
      default: 'sd'
    },
    name: {
      type: String,
      required: true,
      default: '稍等'
    },
    brief: {
      type: String,
      required: true,
      default: '稍等一会'
    },
    url: {
      type: String,
      required: true,
      default: 'www.baidu.com'
    }
  },
  methods: {
    getImgUrl(img) {
      return require('@/assets/' + img + '.png')
    }
  }
}
</script>

<style>
dev {
  box-sizing: border-box;
}

.linkbar-item {
  margin-top: 15px;
  cursor: pointer;
  background-color: chartreuse;
}

.linkbar-item-icon {
  background-color:crimson;
  border-radius: 16px;
  overflow: hidden;
}

.linkbar-item-icon-img {
  width: 60px;
  height: 60px;
}

.name {
  margin-top: 8px;
  color: black;
  font-size: 12px;
  text-align: center;
  overflow: hidden;
  text-overflow:ellipsis;
}

</style>
